<template>
	<view>
		<!-- home -->
		<Home v-show="tabbarActive == 'home'" />
		<!-- order -->
		<Order v-show="tabbarActive == 'order'" />
		<!-- shop -->
		<Shop v-show="tabbarActive == 'shop'" />
		<!-- me -->
		<Me v-show="tabbarActive == 'me'" />
		<!-- tabbar -->
		<van-tabbar z-index="200" @change="changeTabbar" :active="tabbarActive" active-color="#333333"
			inactive-color="#a3a3a9">
			<van-tabbar-item icon="wap-home" name="home">首页</van-tabbar-item>
			<van-tabbar-item icon="bag" name="order">点单</van-tabbar-item>
			<van-tabbar-item icon="graphic" name="shop">排队</van-tabbar-item>
			<van-tabbar-item icon="manager" name="me">我的</van-tabbar-item>
		</van-tabbar>
	</view>
</template>

<script>
	import Home from '../home/home.vue';
	import Order from '../order/home.vue';
	import Shop from '../shop/home.vue';
	import Me from '../me/home.vue';
	import {
		mapState,
		mapActions
	} from 'vuex';
	export default {
		components: {
			Home,
			Order,
			Shop,
			Me
		},
		computed: {
			...mapState(['userInfo', 'tabbarActive'])
		},
		methods: {
			...mapActions(['setTabbarActive']),
			// tabbar改变
			changeTabbar({
				detail
			}) {
				// 已经登录
				if (Object.keys(this.userInfo || {}).length > 0 || detail === 'home' || detail === 'order') {
					this.setTabbarActive({tabbarActive: detail})
					wx.vibrateShort({
						success: function() {
							// console.log('success');
						}
					});
				} else {
					// 未登录
					this.$slNavigateTo('/pages/login/index')
				}
			}
		}
	}
</script>
